
import React, { useEffect, useState } from 'react';
import { Button, Modal, Checkbox, Form, Input, message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { MyState } from '../../type/router.d'
import { useDispatch, useSelector } from "react-redux"
//引入接口
import { auth } from "./api"
import { connect } from 'react-redux'
import { storageUserState } from "../../store/modules/action"
import { USERSTATE } from "../../type/router.d"
import { json } from 'node:stream/consumers';


interface PROPS {
    // artichiveUserState: USERSTATE
}
export const User = (props: PROPS) => {
   
    const [isModalVisible, setIsModalVisible] = useState(true);
    // const { artichiveUserState } = useSelector(({ artichiveUserState }: any) => {
    //     return { ...artichiveUserState }
    // })
    //  useEffect(()=>{
    //         console.log(artichiveUserState)
    //     },[])
    const dispatch = useDispatch()
    const onFinish = (data: any) => {
        // console.log('Received values of form: ', values);
       
        auth.login(data).then((res) => {
            console.log(res.data.data)
            if (res.data.statusCode) {
                message.success("登陆成功")
                //保存用户信息
                //关闭弹框
                setIsModalVisible(false)
                // dispatch.storageUserState
                dispatch(storageUserState(res.data.data))
                localStorage.setItem("User",JSON.stringify(res.data.data))
            } else {
                message.error("登陆失败")
            }
        })
    };

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <div>
            <Modal footer={null} title="请登录" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="name"
                        rules={[{ required: true, message: 'Please input your Username!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: 'Please input your Password!' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="text"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>

                    </Form.Item>
                    <Form.Item>
                        <div>第三方登录</div>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

const mapStateToProps = (state: MyState) => ({
    artichiveUserState: state.artichiveUserState
})

const mapDispatchToProps = {

}

export default connect(mapStateToProps, mapDispatchToProps)(User)
